<template>
  <view class="order-static-list">
    <!--<view class="tip-content">-->
    <!--<text>绿色是已通过，红色是当前状态，灰色是还没有到达的流程 (配件一直都是灰色的，有状态将会显示状态)</text>-->
    <!--</view>-->
    <view class="list-content">
      <view class="list-item" v-for="(item, index) in staticList" :key="index">
        <view>
          <view class="item-content">
            <view class="title-content" v-if="item.title">
              <text>{{ item.title }}</text>
            </view>
            <view class="info-content">
              <!--设备名称 eqName，2、序列号eqNumber，3、型号eqStyleNumber-->
              <view v-if="index < 1">
                <text class="key">设备名称 :</text>
                <text>{{ item.eqName }}</text>
              </view>
              <view v-if="index < 1">
                <text class="key">序列号 :</text>
                <text>{{ item.eqNumber }}</text>
              </view>
              <view v-if="index < 1">
                <text class="key">型号 :</text>
                <text>{{ item.eqStyleNumber }}</text>
              </view>
              <view>
                <text class="key">操作人 :</text>
                <text>{{ item.operatorName }}</text>
              </view>
              <view>
                <text class="key">操作时间 :</text>
                <text>{{ item.operatorTime }}</text>
              </view>
              <view v-if="item.worker">
                <text class="key">指派操作人 :</text>
                <text>{{ item.workerName }}</text>
              </view>
              <view v-if="item.qianmianPhoto">
                <text class="key">验收签字 :</text>
                <view class="img-content">
                  <img @click="review(item.qianmianPhoto)" :src="item.qianmianPhoto" alt="">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-content">
      <table>
        <tr>
          <td class="key">
            <text>故障描述:</text>
          </td>
          <td class="value">
            <text>{{ dataObj.requestRemark }}</text>
          </td>
        </tr>
        <tr>
          <td class="key">
            <text>处理情况:</text>
          </td>
          <td class="value">
            <text>{{ dataObj.workReceiveRemark }}</text>
          </td>
        </tr>
      </table>
    </view>
    <view class="remark-content" v-if="dataObj.detailsList && dataObj.detailsList.length > 0">
      <uni-list>
        <uni-list-item show-arrow clickable title="工单描述" @click="remarkDetailShow = true" />
      </uni-list>
    </view>
    <view class="btn-content" v-if="submitShow">
      <view>
        <button class="login-btn cu-btn block bg-blue lg" @click="submit">{{ submitText }}</button>
      </view>
      <view v-if="ableAddRemark && userInfo.userState * 1 === 1">
        <button class="login-btn cu-btn block lg" @click="addRemark">添加描述</button>
      </view>
    </view>
    <view class="fitting-content" v-if="isFitting" @click="toFitting">
      <text class="iconfont icon-peijianguanli"></text>
    </view>
    <AddRemark v-if="remarkShow" :work-id="workId" :order-type="orderType" @close="remarkShow = false" @add-success="addSuccess" />
    <RemarkDetail v-if="remarkDetailShow" :data-list="dataObj.detailsList" @close="remarkDetailShow = false" />
  </view>
</template>

<script>
  import AddRemark from './AddRemark';
  import RemarkDetail from './RemarkDetail';
  
  export default {
    name: 'OrderStaticList',
    components: {
      AddRemark,
      RemarkDetail,
    },
    props: {
      dataObj: {
        type: Object,
        default() {
          return {};
        },
      },
      dataList: {
        type: Array,
        default() {
          return [];
        },
      },
      submitShow: {
        type: Boolean,
        default: false,
      },
      submitText: {
        type: [ String, Number ],
        default: '处理工单',
      },
      workId: {
        type: [ String, Number ],
        default: '',
      },
      ableAddRemark: {
        type: Boolean,
        default: false,
      },
      ableAddFitting: {
        type: Boolean,
        default: false,
      },
      orderType: {
        type: String,
        default: '',
      },
      isFitting: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        staticList: [],
        userInfo: this.$store.state.user,
        remarkShow: false,
        remarkDetailShow: false,
      };
    },
    watch: {
      dataList: {
        immediate: true,
        deep: true,
        handler() {
          this.setDataList();
        },
      },
    },
    methods: {
      setDataList() {
        const { dataList } = this;
        this.staticList = dataList.map((value) => {
          const actionBy = value.requestByName || value.createByName || value.workReceiveByName;
          const actionTime = value.requestTime || value.createTime || value.workReceiveDate;
          // const workerList = [];
          // if (value.workEnginner1) {
          //   workerList.push(value.workEnginner1);
          // }
          // if (value.workEnginner2) {
          //   workerList.push(value.workEnginner2);
          // }
          // if (value.workEnginner3) {
          //   workerList.push(value.workEnginner3);
          // }
          const obj = { ...value, actionBy, actionTime };
          return obj;
        });
      },
      submit() {
        this.$emit('submit');
      },
      addRemark() {
        this.remarkShow = true;
      },
      addSuccess() {
        this.$emit('add-remark-success');
      },
      toFitting() {
        const { dataObj, workId, ableAddFitting, userInfo, orderType } = this;
        let url = `/pages/device/DeviceFitting?workId=${workId}&workStatus=${dataObj.workStatus}`;
        if (ableAddFitting && dataObj.workStatus * 1 === 1 && userInfo.userState * 1 === 1) {
          url += `&editAble=1`;
        }
        if (orderType) {
          url += `&orderType=${orderType}`;
        }
        uni.navigateTo({
          url,
        });
      },
      review(url) {
        uni.previewImage({
          urls: [ url ],
          current: 0,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../static/icon-font/iconfont.css";
  
  .order-static-list {
    &, * {
      box-sizing: border-box;
    }
    height: 100%;
    display: flex;
    flex-direction: column;
    .tip-content {
      padding: 10px 15px;
      text {
        font-size: 12px;
        line-height: 1.5;
      }
    }
    .remark-content {
    
    }
    .list-content {
      flex: 1;
      overflow: auto;
      padding: 10px 15px 0;
      position: relative;
      .list-item {
        position: relative;
        /*border-left: 2px solid #d9d9d9;*/
        padding: 5px 0;
        > view {
          padding-left: 20px;
          .item-content {
            padding: 10px;
            border: 2px solid #a0dcea;
            position: relative;
            border-radius: 5px;
            .title-content {
              font-size: 12px;
              margin-bottom: 5px;
            }
            .info-content {
              color: #737373;
              font-size: 12px;
              line-height: 1.5;
              > view {
                padding-top: 5px;
                .key {
                  vertical-align: top;
                }
                .img-content {
                  height: 80px;
                  display: inline-block;
                  img {
                    display: block;
                    height: 100%;
                  }
                }
              }
            }
            &:before {
              display: block;
              content: "";
              width: 0px;
              height: 0px;
              position: absolute;
              top: 50%;
              left: -20px;
              transform: translateY(-50%);
              border: 10px solid transparent;
              border-right-color: #a0dcea;
            }
          }
        }
        &:before {
          display: block;
          content: "";
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #037f05;
          position: absolute;
          top: 50%;
          left: -4px;
          transform: translateY(-50%);
        }
      }
      &:before {
        display: block;
        content: "";
        border-left: 2px solid #d9d9d9;
        position: absolute;
        height: 100%;
        top: 0;
        left: 15px;
      }
    }
    .detail-content {
      padding: 10px 15px;
      table {
        width: 100%;
        border-collapse: collapse;
        tr {
          td {
            line-height: 1;
            text {
              display: block;
              font-size: 12px;
              color: #4c4c4c;
            }
            &.key {
              white-space: nowrap;
            }
            &.value {
              width: 100%;
              padding: 5px;
            }
          }
        }
      }
    }
    
    .btn-content {
      display: flex;
      > view {
        flex: 1;
        padding: 10px;
      }
    }
    .fitting-content {
      position: fixed;
      right: 15px;
      bottom: 100px;
      color: #3b8dff;
      line-height: 1;
      padding: 15px;
      border-radius: 50%;
      background-color: white;
      box-shadow: 2px 2px 10px 0 rgba(75, 79, 97, 0.3);
      uni-text {
        display: block;
        font-size: 20px;
      }
    }
  }
</style>
